

/*
    开发环境的配置
*/

const { resolve } = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./index.js",
    output: {
        filename: "build.js",
        path: resolve(__dirname, "build")
    },
    module: {
        rules: [
            // loader配置
            {
                // 处理less资源
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            },
            {
                // 处理css资源
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader",
                ]
            },
            {
                // 处理图片资源
                test: /\.(png|jpg|gif)$/,
                loader: "url-loader",
                options: {
                    limit: 8 * 1024,
                    name: "[hash:5].[ext]",
                    // 关闭es6的module 而开启commonjs的module, 与file-loader保持一致
                    esmodule: false,
                    outputPath: "imgs"
                }
            },
            {
                // 处理html中img标签的
                test: /\.html$/,
                loader: "html-loader"
            },
            {
                // 处理其他资源
                exclude: /\.(html|css|less|js|jpg|png|gif)$/,
                loader: "file-loader",
                options: {
                    name: "[hash:5].[ext]",
                    outputPath: "medias"
                }
            }
        ]
    },
    plugins: [
        // plugins的配置
        new HtmlWebpackPlugin({
            template: "index.html"
        })
    ],
    mode: "development",
    devServer: {
        contentBase: resolve(__dirname, "build"),
        compress: true,
        port: 3000,
        open: true
    }
}